<template>
  <div class="goods">
    <mt-navbar :fixed="!isTop" class="page-part" v-model="selected">
      <mt-tab-item id="1">详情</mt-tab-item>
      <mt-tab-item id="2">规格</mt-tab-item>
      <mt-tab-item id="3">售后保障</mt-tab-item>
      <mt-tab-item id="4">评价 <span style="color: red">{{proData.assessmentsCount}}</span></mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected" class="goods-con">
      <mt-tab-container-item id="1">
        <p v-html="proData.remark">
          {{proData.remark}}
        </p>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        {{proData.specifications}}
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        {{proData.afterSales}}
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <div>
        </div>
        <mt-navbar v-model="act">
          <mt-tab-item id="p1">全部<span style="color: red">{{talNum}}</span></mt-tab-item>
          <mt-tab-item id="p2">好评<span style="color: red">{{proData.goodCount}}</span></mt-tab-item>
          <mt-tab-item id="p3">中评<span style="color: red">{{proData.middleCount}}</span></mt-tab-item>
          <mt-tab-item id="p4">差评<span style="color: red">{{proData.badCount}}</span></mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="act">
          <mt-tab-container-item id="p1">
            <div class="border-bottom" style="background: #fff;" v-for="(item, index) of proData.assessments" :key="index">
              <mt-cell :title="'用户:' + item.memberName"></mt-cell>
              <p style="padding: 0 10px 18px;">
                {{item.content==="undefined"?"15天内买家未做出评论":item.content}}11111111111111111111111
              </p>
              <dir class="imgs-unit">
                <div v-for="(v, i) of item.imgs" :key="i" class="imgsList">
                  <img :src="v" alt="">
                </div>
              </dir>
            </div>
            <div  style="background: #fff;padding: 0 10px 18px; text-align:center" v-show="proData.assessments === undefined || proData.assessments.length<1">--暂无评论--</div>
          </mt-tab-container-item>
          <mt-tab-container-item id="p2">
            <div class="border-bottom" style="background: #fff;" v-for="(item, index) of proData.goodAssessmentData" :key="index">
              <mt-cell :title="'用户:' + item.memberName"></mt-cell>
              <p style="padding: 0 10px 18px;">
                {{item.content==="undefined"?"15天内买家未做出评论":item.content}}
              </p>
              <dir class="imgs-unit">
                <div v-for="(v, i) of item.imgs" :key="i" class="imgsList">
                  <img :src="v" alt="">
                </div>
              </dir>
            </div>
            <div  style="background: #fff;padding: 0 10px 18px; text-align:center" v-show="proData.goodAssessmentData === undefined || proData.goodAssessmentData.length<1">--暂无评论--</div>
          </mt-tab-container-item>
          <mt-tab-container-item id="p3">
            <div class="border-bottom" style="background: #fff;" v-for="(item, index) of proData.middleAssessmentData" :key="index">
              <mt-cell :title="'用户:' + item.memberName"></mt-cell>
              <p style="padding: 0 10px 18px;">
                {{item.content==="undefined"?"15天内买家未做出评论":item.content}}
              </p>
              <dir class="imgs-unit">
                <div v-for="(v, i) of item.imgs" :key="i" class="imgsList">
                  <img :src="v" alt="">
                </div>
              </dir>
            </div>
            <div  style="background: #fff;padding: 0 10px 18px; text-align:center" v-show="proData.middleAssessmentData === undefined || proData.middleAssessmentData.length<1">--暂无评论--</div>
          </mt-tab-container-item>
          <mt-tab-container-item id="p4">
            <div class="border-bottom" style="background: #fff;" v-for="(item, index) of proData.badAssessmentData" :key="index">
              <mt-cell :title="'用户:' + item.memberName"></mt-cell>
              <p style="padding: 0 10px 18px;">
                {{item.content==="undefined"?"15天内买家未做出评论":item.content}}
              </p>
              <dir class="imgs-unit">
                <div v-for="(v, i) of item.imgs" :key="i" class="imgsList">
                  <img :src="v" alt="">
                </div>
              </dir>
            </div>
            <div  style="background: #fff;padding: 0 10px 18px; text-align:center" v-show="proData.badAssessmentData === undefined || proData.badAssessmentData.length<1">--暂无评论--</div>
          </mt-tab-container-item>
        </mt-tab-container>
      </mt-tab-container-item>
    </mt-tab-container>
    <div class="goods-con">
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailGoods',
  props: {
    isTop: Boolean,
    proData: Object
  },
  data () {
    return {
      selected: '1',
      act: 'p1',
      isFixed: false
    }
  },
  computed: {
    talNum () {
      return this.proData.goodCount + this.proData.middleCount + this.proData.badCount
    }
  }
}
</script>

<style lang="stylus" scoped>
import '~styles/mixins.styl'
.goods >>> .mint-navbar
  border-bottom: 3px solid #eee
  padding-bottom: .1rem
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #2a2a2a
  color: #2a2a2a;
  margin-bottom: .02rem;
.mint-tab-item
  color: #5f666b
.mint-tab-item-label
  font-size: 14px;
.goods-con
  padding-top: 2%
  width: 96% !important
  overflow: hidden
  margin: 0 auto
  position: relative
  display: block
.pinlun
  width: 100%
  margin: .3rem
  text-align: center
  border: 1px solid #eee
  th
    border: .02px solid #eee
    padding: .1rem
.imgs-unit
  display: flex
  flex-wrap: wrap
  width: 100%
  box-sizing: border-box
  padding: .1rem
  margin: 0
  .imgsList
    background: #fff
    padding: .1rem
    width: 33.33%
    box-sizing: border-box
    img
      width: auto;
      height: auto;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
</style>
